﻿/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #f00;
    display: block;
    margin-top: 8px;
    text-align: center;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #f00;
    background-color: #fee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #f00;
}

.validation-summary-valid
{
    display: none;
}


/* jQuery mobile styles
-----------------------------------------------------------*/

/* Make listview buttons fill the whole horizontal width of the screen */
.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li
{
    padding-right: 15px;
}

.ui-bar-a, .ui-body-a, .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a, .ui-bar-b, .ui-body-b, .ui-btn-up-b, .ui-btn-hover-b, .ui-btn-down-b, .ui-bar-c, .ui-body-c, .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c, .ui-bar-d, .ui-body-d, .ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d, .ui-bar-e, .ui-body-e, .ui-btn-up-e, .ui-btn-hover-e, .ui-btn-down-e, .ui-btn-active
{
    text-shadow: none;
}

/* Css for list*/
/* A bit custom styling */
.my-page
{
    background: #ffffff;
}
/* Link to the Google webfont is in the head */
.my-page .ui-title, .my-page .ui-li-aside
{
    font-family: 'Open Sans' , sans-serif;
    font-weight: 400;
}
.my-page .ui-header
{
    color: #990099;
}
.my-page .ui-footer
{
    color: #666;
}
.my-page .ui-li-desc
{
    color: #c0c0c0;
}
.my-page .ui-li-aside
{
    color: #990099;
}
.my-page .ui-listview .ui-li.ui-btn
{
    background-image: none;
    border-color: #222;
}
/* First breakpoint is 768px. 3 column layout. Tiles 250x250 pixels at the breakpoint. */
@media all and (min-width: 768px)
{
    .my-page .ui-content
    {
        padding: 9px;
    }
    .my-page .ui-listview .ui-li.ui-btn
    {
        float: left;
        width: 30.9333%; /* 33.3333% incl. 2 x 1.2% margin */
        height: 232px;
        margin: 9px 1.2%;
        border-width: 0; /* The 1px border would break the layout so we set it on .ui-btn-inner instead. */
    }
    /* If you don't want a border at all, just set "border: none;" here to negate the semi white top border */
    .my-page .ui-listview .ui-li.ui-btn-inner
    {
        border: inherit;
        border-width: 1px;
        margin: -1px;
    }
    .my-page .ui-listview .ui-btn-inner, .my-page .ui-listview .ui-btn-text, .my-page .ui-listview .ui-link-inherit, .my-page .ui-listview .ui-li-thumb
    {
        width: 100%;
        height: 100%;
        display: block;
        overflow: hidden;
    }
    .my-page .ui-listview .ui-link-inherit
    {
        padding: 0 !important;
        position: relative;
    }
    /* Inherit the border-radius from the UL that has class .ui-corner-all in case of an inset listview. */
    .my-page .ui-listview .ui-li, .my-page .ui-listview .ui-btn-text, .my-page .ui-listview .ui-link-inherit, .my-page .ui-listview .ui-li-thumb
    {
        -webkit-border-radius: inherit;
        border-radius: inherit;
    }
    .my-page .ui-listview .ui-li-thumb
    {
        height: auto; /* To keep aspect ratio. */
        max-width: 100%;
        max-height: none;
        margin: 0;
        left: 0;
        z-index: -1;
    }
    /* Hide the icon */
    .my-page .ui-listview .ui-icon
    {
        display: none;
    }
    /* Make text wrap. */
    .my-page .ui-listview .ui-li-heading, .my-page .ui-listview .ui-li-desc
    {
        white-space: normal;
        overflow: visible;
        position: absolute;
        left: 0;
        right: 0;
    }
    /* Text position */
    .my-page .ui-listview .ui-li-heading
    {
        margin: 0;
        padding: 20px;
        bottom: 50%;
    }
    .my-page .ui-listview .ui-li-desc
    {
        margin: 0;
        padding: 0 20px;
        min-height: 50%;
        bottom: 0;
        line-height: 1.5;
    }
    /* Semi transparent background and different position if there is a thumb */
    .ui-listview .ui-li-has-thumb .ui-li-heading, .ui-listview .ui-li-has-thumb .ui-li-desc
    {
        background: #ffffff;
        background: rgba(0,0,0,0);
        -webkit-background-clip: padding;
        background-clip: padding-box;
    }
    .ui-listview .ui-li-has-thumb .ui-li-heading
    {
        padding: 10px;
        bottom: 20%;
    }
    .ui-listview .ui-li-has-thumb .ui-li-desc
    {
        padding: 0 10px;
        min-height: 20%;
        -webkit-border-bottom-left-radius: inherit;
        border-bottom-left-radius: inherit;
        -webkit-border-bottom-right-radius: inherit;
        border-bottom-right-radius: inherit;
    }
    /* ui-li-aside has class .ui-li-desc as well so we have to override some things. */
    .my-page .ui-listview .ui-li-desc.ui-li-aside
    {
        padding: 2px 10px;
        width: auto;
        min-height: 0;
        top: 0;
        left: auto;
        bottom: auto; /* Custom styling. */
        color: #c0c0c0;
        background: #990099;
        background: rgba(153,0,153,.85);
        -webkit-border-top-right-radius: inherit;
        border-top-right-radius: inherit;
        -webkit-border-bottom-left-radius: inherit;
        border-bottom-left-radius: inherit;
        -webkit-border-bottom-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    /* If you want to add shadow, don't kill the focus style. */
    .my-page .ui-listview .ui-btn:not(.ui-focus)
    {
        -moz-box-shadow: 0px 0px 9px #111;
        -webkit-box-shadow: 0px 0px 9px #111;
        box-shadow: 0px 0px 9px #111;
    }
    /* Images mask the hover bg color so we give desktop users feedback by applying the focus style on hover as well. */
    .my-page .ui-listview .ui-btn:hover
    {
        -moz-box-shadow: 0px 0px 12px #387bbe;
        -webkit-box-shadow: 0px 0px 12px #387bbe;
        box-shadow: 0px 0px 12px #387bbe;
    }
    /* Animate focus and hover style, and resizing. */
    .my-page .ui-listview .ui-btn
    {
        -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
        -o-transition: all 500ms ease;
        -ms-transition: all 500ms ease;
        transition: all 500ms ease;
    }
}
/* Second breakpoint. 4 column layout. Tiles will be 250x250 pixels again at the breakpoint. */
@media all and (min-width: 1020px)
{
    .my-page .ui-content
    {
        padding: 10px;
    }
    /* Set a max-width for the last breakpoint to prevent too much stretching on large screens.
        By setting the max-width equal to the breakpoint width minus padding we keep square tiles. */
    .my-page .ui-listview
    {
        max-width: 1000px;
        margin: 0 auto;
    }
    /* Because of the 1000px max-width the width will always be 230px (and margin left/right 10px),
        but we stick to percentage values for demo purposes. */
    .my-page .ui-listview .ui-li.ui-btn
    {
        width: 23%;
        height: 230px;
        margin: 10px 1%;
    }
}
/* For this demo we used images with a size of 310x310 pixels. Just before the second breakpoint the images reach their max width: 1019px - 2 x 9px padding = 1001px x 30.9333% = ~310px */


/* style for detail product */
/* Adjust the width of the left reveal menu.
Copy all CSS from jquery.mobile.panel.css and delete the properties other than width, left, right and transform.
Then delete the selectors/rules for display modes (reveal/push/overlay) and the position (left/right) that you don't use.
If you don't use fixed toolbars on your page you can delete those selectors as well.
Narrow the scope of the selectors to prevent other panels being affected by the overrides. */
#demo-page #left-panel.ui-panel
{
    width: 15em;
}
#demo-page #left-panel.ui-panel-closed
{
    width: 0;
}
#demo-page .ui-panel-position-left.ui-panel-display-reveal
{
    left: 0;
}
#demo-page .ui-panel-content-wrap-position-left.ui-panel-content-wrap-open, .ui-panel-dismiss-position-left.ui-panel-dismiss-open
{
    left: 15em;
    right: -15em;
}
#demo-page .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal
{
    left: 0;
    right: 0;
    -webkit-transform: translate3d(15em,0,0);
    -moz-transform: translate3d(15em,0,0);
    transform: translate3d(15em,0,0);
}
/* Combined listview collapsible menu. */
/* Unset negative margin bottom on the listviews. */
#left-panel .ui-panel-inner > .ui-listview
{
    margin-bottom: 0;
}
/* Unset top and bottom margin on collapsible set. */
#left-panel .ui-collapsible-set
{
    margin: 0;
}
/* The first collapsible contains the collapsible set. Make it fit exactly in the collapsible content. */
#left-panel .ui-panel-inner > .ui-collapsible > .ui-collapsible-content
{
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
}
/* Remove border top if a collapsible comes after a listview. */
#left-panel .ui-panel-inner > .ui-collapsible > .ui-collapsible-heading .ui-btn, #left-panel .ui-collapsible.ui-first-child .ui-collapsible-heading .ui-btn
{
    border-top: none;
}
/* Give the first collapsible heading the same padding, i.e. same height, as the list items. */
#left-panel .ui-collapsible-heading .ui-btn-inner
{
    padding: .7em 40px .7em 15px;
}
/* Give the other collapsible headings the same padding and font-size as the list divider. */
#left-panel .ui-collapsible-set .ui-collapsible-heading .ui-btn-inner
{
    padding: .5em 40px .5em 15px;
    font-size: 14px;
}
/* Styling of the close button in both panels. */
#demo-page .ui-panel-inner > .ui-listview .ui-first-child
{
    background: #eee;
}
/* Reveal menu shadow on top of the list items */
#demo-page .ui-panel-display-reveal
{
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
#demo-page .ui-panel-content-wrap-position-left
{
    -webkit-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
    -moz-box-shadow: -5px 0px 5px rgba(0,0,0,.15);
    box-shadow: -5px 0px 5px rgba(0,0,0,.15);
}
/* Use the ui-body class of your page theme to set a background image.
The page theme will be set for the content wrapper,
while the page get the panel them before opening the panel. */
#demo-page .ui-body-d
{
    background-image: url(../../_assets/img/bg-pattern.png);
    background-repeat: repeat-x;
    background-position: left bottom;
}
/* Styling of the page contents */
.article p
{
    margin: 0 0 1em;
    line-height: 1.5;
}
.article p img
{
    max-width: 100%;
}
.article p:first-child
{
    text-align: center;
}
.article small
{
    display: block;
    font-size: 75%;
    color: #c0c0c0;
}
.article p:last-child
{
    text-align: right;
}
.article a.ui-btn
{
    margin-right: 2em;
    -webkit-border-radius: .4em;
    border-radius: .4em;
}
@media all and (min-width:769px)
{
    .article
    {
        max-width: 994px;
        margin: 0 auto;
        padding-top: 4em;
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 2em;
        -moz-column-gap: 2em;
        column-gap: 2em;
    }
    /* Fix for issue with buttons and form elements
        if CSS columns are used on a page with a panel. */
    .article a.ui-btn
    {
        -webkit-transform: translate3d(0,0,0);
    }
}

/* logo site style */
#logo
{
    padding: 5px 0px 5px 5px;
    width: 155px;
    float: left;
}

#logo a
{
    color: white;
    cursor: pointer;
}

#logo a img
{
    width: 150px;
    height: 50px;
}

/* shopping cart */

#shoppingCart
{
    position: relative;
}

#shoppingCart a
{
    color: #000;
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 70px;
    font-size: 12px;
}

#shoppingCart p
{
    background: url("images/hdCart.png") no-repeat scroll left top transparent;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bolder;
    padding: 17px;
    position: absolute;
    right: 10px;
    top: -13px;
    z-index: 100;
    clear: both;
}

#shoppingCart span
{
    color: #000;
    font-weight: bold;
    position: absolute;
    top: 35px;
    right: 70px;
}

.logoPanel
{
    height: 60px;
}

/* end logo site style */

/* detail */

#detail_
{
    max-width: 100%;
    margin: 0px 4px;
    display: inline-block;
    text-align: justify;
    font-size: smaller;
}
#img_sell
{
    overflow: hidden;
    padding: 0px 2px;
    margin: 0px !important;
}
#img_pro
{
    width: 50%;
    float: left;
   
}
#img_pro img
{
    float: left;
     border: 1px gray solid ;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    width: 90%; 
}
#sell_
{
    width: 48%;
    padding-top: 10px;
    float: right;
}
#sell_ h3 {
    color: #D35313;
}
#sell_ p {
    color: #DBCD08;
}
#title_dec {
    width: 100%;
    overflow: hidden;
    height: 33px;
}

#title_dec h3{
    float: right;
    padding: 2px 10px;
     background-color: #77755E;    
}
#title_dec {
    color: #FFffff;
    margin-top: -25px;
    
}
.description 
{
    margin: 0px;
    padding: 5px;
    background-color: #F7F6ED;    
    border-top: 1px #77755E solid;
    padding-top: 10px;
}
#sell_ p a
{
    width: 40%;
    margin-left: 25px;
}



@media (max-width: 320px)
{
    .detail-image
    {
        width: 100%;
    }
}
@media (min-width: 320px) and (max-width: 768px)
{
    .detail-image
    {
        width: 50%;
    }
}
@media (min-width: 768px) and (max-width: 1280px)
{
    .index-image
    {
        display: none;
    }
    .detail-image
    {
        width: 50%;
    }
}
@media (min-width: 1280) and (max-width: 20000px)
{
    .index-image
    {
        display: none;
    }
    .detail-image
    {
        width: 50%;
    }
}
.index-image
{
    max-width: 100%;
}

/* end detail */

/* cart */

.grid {
    width: 100%;
    border: 1px #D8CC5D solid;
    overflow: hidden;
    
}
.grid h3{
    text-align: right;
    padding-right: 3px;
    font-size: smaller;
}

.grid_first{
    width: 100%;
    border: 1px #D8CC5D solid;
    overflow: hidden;
    background-color: #B2032C;
    color:#FFFFFF;
}
.grid_first h3{
    text-align: right;
    padding-right: 3px;
    font-size: smaller;
}


.grid_end{
    width: 100%;
    border: 1px #D8CC5D solid;
    overflow: hidden;
    background-color: #FF3F56;
    color:#FFFFFF;
}
.grid_end h3{
    text-align: right;
    padding-right: 3px;
    font-size: smaller;
}
.img_grid {
    width: 19%;
    float: left;
    height: 50px;    
    border-right: 1px #D8CC5D solid;
}
.img_grid img{
    width: 90%;
    float: left;
    height: 100%;    
}
.img_grid h3{
    text-align: center;  
}

.name_grid {
    width: 30%;
    float: left;
    
}
.name_grid h3{
    text-align: left;
    margin-left: 3px; 
}

.amount_grid {
    width: 20%;
    float: left;
}

.value_grid {
    width: 30%;
    float: right;
}
/* end cart */
